 <%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="../include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>资源健康度分析</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/>  
	<%@ include file="../include/common.jsp"%>
	<%@ include file="../include/table.jsp"%>
	<script type="text/javascript" src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/calendar/zh_CN_WdatePicker.js"></script>
	<script type="text/javascript">
	function createChart(values,type)
	{
		var category="";
		var val = "";

		for(var i=0; i<values.length; i++){
			var v = values[i];
			category+=" <category label='"+v.time+"' ></category>";
			var colorArray = ['2AD62A','69A8E2','D7D741','EFAB69','C83D3B'];
			var colorIndex = 0;
			if(v.degree>=0&&v.degree<=20){
				colorIndex = colorArray.length -1;
			}else if(v.degree>20&&v.degree<=40){
				colorIndex = colorArray.length -2;
			} else if(v.degree>40&&v.degree<=60){
				colorIndex = colorArray.length -3;
			} else if(v.degree>60&&v.degree<=80){
				colorIndex = colorArray.length -4;
			}
		    val+=" <set value='"+v.degree+"' anchorBorderColor='"+colorArray[colorIndex]+"' anchorBgColor='"+colorArray[colorIndex]+"' />";
		}
		labelStep = 1;
		if(values.length>7&&values.length<=50){
			labelStep=4;
		}else if(values.length>50&&values.length<=100){
			labelStep=8;
		}else if(values.length>100){
			labelStep=10;
		}
		var str="<?xml version='1.0' encoding='GBK'?>";
		str+="<chart  showNames='0'  yAxisMinValue='0' yAxisMaxValue='100' showLimits='1' showLegend='0' canvasBorderThickness='1'";
		str+=" showDivLineValue='1' showTickMarks='1'  lineThickness='2' showValues='0'  showLabels ='1' ";
		str+=" formatNumberScale='0' anchorRadius='2'  anchorBorderThickness='2'   divLineAlpha='20' divLineColor='CC3300'";
		str+=" divLineIsDashed='0' showAlternateHGridColor='1' alternateHGridAlpha='5' alternateHGridColor='CC3300'";
		str+=" shadowAlpha='40' labelStep='"+labelStep+"'   numDivLines='5' chartTopMargin='8' chartBottomMargin='5'";
		str+=" chartLeftMargin='5' chartRightMargin='5' bgColor='FFFFFF,CC3300' bgAngle='270' bgAlpha='10,10' >";
		str+="<categories>";
		str+=category;
		str+="</categories>";
		str+="<dataset seriesName='平均值'  color='2AD62A' anchorBorderColor='2AD62A' anchorBgColor='2AD62A'>";
		str+=val;
		str+="</dataset>";

		currentval = values.currentval;
		if(currentval!=null){
			str+=" <trendlines>";
			str+=" <line startValue='"+currentval+"' isTrendZone='0'  color='FF0000'  dashed='2' dashGap='5'/>";
			str+=" </trendlines>";
		}
		str+="</chart>";
		var t = new Date().getMilliseconds();
		cpuHisLine =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/MSLine.swf", "cpuHisLine"+t, $('#searchParameter').width(), "220", "0", "1" );
		cpuHisLine.setDataXML(str);
		cpuHisLine.render("chart1");
	}
	
	function choose(type)
	{
		var dimensionValue = $('#dimension').val();
		var beginDate ;
		var endDate;
		if(type==0){
			if(dimensionValue==1){ //时汇聚
				beginDate= $('#beginDate').val();
				endDate  = $('#endDate').val();
			}else{
				beginDate= $('#beginDate2').val();
				endDate  = $('#endDate2').val();
			}
		}
		$.ajax({
			type:'post',
			url:'res-healthy!findResHealthData.action',
			data:{choose:type,id:'${res.id}',dateScope:beginDate+"|"+endDate,dimension:$('#dimension').val()},
			global:false,
			async:false,
			cache:false,
			dataType:'json',
			success:function(data,textStatus){
				createChart(data,type);	
			}
		});	
	}
	
	function changedimen(){
	  var dataIndex = $('#dimension').val();
	  if(dataIndex==1){
	    $('#dayData').hide();
	  	$('#houseData').show();
	  	initDate();
	  }else {
	  	$('#dayData').show();
	  	$('#houseData').hide();
	  	initDate();
	  }
	}
	
	//给数补0
		function add_zero(temp)
		{
			 if(temp<10) 
			 		return "0"+temp;
			 else 
			 		return temp;
		}
	
	function initHealthyHistoryData(){
		var oTable=$("#healthyHistoryList").dataTable({
    			"bProcessing": true, 
				"bServerSide": true,
				"sServerMethod": 'POST',
				"sAjaxSource":'res-healthy!findHealthyHistory.action',
				"bPaginate":false,
				"bSort": true,
				"bFilter":false,
				"bJQueryUI":false,
				"sPaginationType": 'full_numbers',
				"sDom": 'rt <"bottom"flpi>',
				"aoColumns":[
					{"mDataProp":"time","bSortable": false},
					{"mDataProp":"degree","bSortable": false},
					{"mDataProp":"normalTime","bSortable": false},
					{"mDataProp":"minorTime","bSortable": false},
					{"mDataProp":"warnTime","bSortable": false},
					{"mDataProp":"majorTime","bSortable": false},
					{"mDataProp":"criticalTime","bSortable": false}
				],
				"oLanguage": { 
					 		"sLengthMenu": "每页 _MENU_ 条",
			 		 		"sZeroRecords": "  ",
							"sInfo": "当前从 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", 
							"sInfoEmpty": "没有找到记录",
							"oPaginate":{"sFirst":" ","sPrevious":" ","sNext":" ","sLast":" "}
				},
				"fnServerParams":function(aoData){
					var dimensionValue = $('#dimension').val();
					var beginDate ;
					var endDate;
					var timeScope= $("#timeScope").val();
					if(dimensionValue==1){ //时汇聚
						beginDate= $('#beginDate').val();
						endDate  = $('#endDate').val();
					}else{
						beginDate= $('#beginDate2').val();
						endDate  = $('#endDate2').val();
					}
					aoData.push({"name":"dimension","value":dimensionValue},{"name":"dateScope","value":beginDate+"|"+endDate},
						        {"name":"timeScope","value":timeScope},{"name":"id","value":"${id}"});
				}
		 });
	}
	
	function search(){
		var oTable=$("#healthyHistoryList").dataTable();
		oTable.fnPageChange("first",true);
		choose($('#timeScope').val());
	}
	
	function initDate(){
		var currentDate =new Date();
		//赋默认值
		if($('#dimension').val()==1){
			$('#beginDate').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate())+" 00 时");
 				$('#endDate').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate())+" "+add_zero(currentDate.getHours())+" 时");
		}else{
			$('#beginDate2').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate()));
 				$('#endDate2').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate()));
		}
	}
	
	$(document).ready(function() {
		choose(1);
		initHealthyHistoryData();
		
		$("#timeScope").bind('change',function(event){
			var countScope = $('#countScope');
			if(this.value==0){
				countScope.show();
				initDate();
			}else{
				countScope.hide();
			}
		});
	});
	</script>
  </head>
  
  <body>
	   <div class="searchFormStyle" id="searchParameter" style="padding:10px 10px 10px 10px;">
  		 <span style="float: left;">
  		    <label >数据维度：</label>
  			<select id="dimension" name="dimension" class="select"  onchange="changedimen();">  
    			<option value="1" >时汇聚数据 </option>
    			<option value="2" >日汇聚数据</option>
    		</select>
    	</span>
	    <span style="float: left;">
	       <label >时间范围：</label>
	       <select id="timeScope" name="timeScope">
	         <option value="1">近24小时</option>
	         <option value="7">近7天内</option>
	         <option value="30">近一个月</option>
	          <option value="0">自定义</option>
	       </select>
   		</span>
   		<span style="float: left;display:none;" id="countScope">
		   <label >统计范围：</label>
		   <span id="houseData">
	   			<input id="beginDate" name="beginDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH 时',maxDate:'%y-%M-%d %H',readOnly:true})"/>
				<label>-</label>
				<input id="endDate" name="endDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH 时',maxDate:'%y-%M-%d %H',minDate:$('#beginDate').val(),readOnly:true})"/>
   		   </span>
   		   <span id="dayData" style="display: none;">
	   		   	 <input id="beginDate2" name="beginDate2" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',readOnly:true})"/>
				 <label>-</label>
				 <input id="endDate2" name="endDate2" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',minDate:$('#beginDate2').val(),readOnly:true})"/>
   		   </span>
	    </span>
	    <input type="button" onclick="search();" value="统计" class="searchFormButtonStyle" />
	 </div>
	 <div>健康度历史值</div>
	 <div id="chart1">
	 
	 </div>
	 <div id="healthyData">
	 	<table cellpadding="0" cellspacing="0" border="0" class="display" id="healthyHistoryList" width="100%">
				<thead>
					<tr>
						<th width="5%">时间</th>
						<th width="4%">健康度</th>
						<th width="4%">健康时间</th>
						<th width="4%">良好时间</th>
						<th width="4%">中等时间</th>
						<th width="4%">较差时间</th>
						<th width="4%">不可用时间</th>
					</tr>
				</thead>
		</table>
	 </div>
  </body>
</html>
